<template>
  <div class="phone-container">
    <div class="phone-container-main">
      <form action="#">
        <input
          type="text"
          class="phone-ipt"
          placeholder="请输入手机号"
          v-model="phoneNumber"
        /><br />
        <input
          v-model="shortMsg"
          type="text"
          class="short-msg"
          placeholder="请输入验证码"
        />
        <button
          v-if="ToggleshortMsgBtn"
          class="getMsg-btn"
          @click.prevent="getShortMsg"
        >
          获取验证码
        </button>
        <button v-else class="getMsg-btn" disabled>
          {{ countDown }}{{ disabledBtnMsg }}
        </button>
        <div class="phone-config">
          <span>密码登录</span>
          <div class="zidong-login">
            <input type="checkbox" />
            <span>自动登录</span>
          </div>
        </div>
        <button class="login-btn" @click.prevent="phoneLogin">登录</button>
      </form>
    </div>
    <footer class="phone-login-bottom">
      <a href="javascript:;" class="go-other-login" @click="goOtherLogin"
        >&lt;&nbsp;其他登录方式</a
      >
      <a href="javascript:;" class="txt-r">&lt;&nbsp;没用账号？免费注册</a>
    </footer>
  </div>
</template>

<script>
import { getShortMsgApi, JiaoYanShortMsgApi } from "@/requset/api";
export default {
  data() {
    return {
      phoneNumber: "", // 手机输入框 保存手机号
      ToggleshortMsgBtn: true, // 控制倒计时按钮和发送验证码按钮的显示与隐藏
      disabledBtnMsg: "s后重新发送",
      second: 60,
      shortMsg: "", // 验证码
      reg: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, // 手机号正则
      canLogin: false, // 控制能否登录
      closeLogin: null,
    };
  },
  watch: {
    // 监听 秒数
    second(newNum) {
      // 到 0 秒时
      if (newNum === 0) {
        this.second = 60;
        // 展示 获取验证码 按钮
        this.ToggleshortMsgBtn = true;
      }
    },
  },
  computed: {
    countDown() {
      return this.second;
    },
  },
  methods: {
    // 展示其他登录方式组件
    goOtherLogin() {
      this.$store.commit("goQrLogin");
    },
    // 获取验证码
    getShortMsg() {
      // 判断手机号格式
      if (this.reg.test(this.phoneNumber)) {
        // 发送请求 获取验证码
        getShortMsgApi(this.phoneNumber).then(({ data: res }) => {});
      } else if (this.phoneNumber == "") {
        this.$store.commit("OpenTitle", "手机号不能为空，请填写手机号！");
        this.$store.dispatch("closeTitle");
        return;
      } else {
        this.$store.commit("OpenTitle", "请输入正确的手机号！");
        this.$store.dispatch("closeTitle");
        return;
      }
      // 定时器 控制 倒计时
      setInterval(() => {
        this.second--;
      }, 1000);
      // 手机号验证码校验完毕 可以登录
      this.canLogin = true;
      // 展示 倒计时按钮
      this.ToggleshortMsgBtn = false;
    },
    // 登录
    phoneLogin() {
      if (this.phoneNumber != "" && this.shortMsg != "") {
        this.canLogin = true;
      }
      if (this.canLogin) {
        // 请求校验验证码的接口
        JiaoYanShortMsgApi({ phone: this.phoneNumber, captcha: this.shortMsg })
          .then(({ data: res }) => {
            if (res.data) {
              // 关闭登陆模态框
              this.$store.commit("ToggleLogin");
              this.$router.push("/recommend");
              console.log("手机验证码已登录成功", res);
            }
          })
          .catch((err) => {
            console.log(err.response.data.message);
          });
      } else {
        // 提示用户错误
        this.$store.commit("OpenTitle", "请正确填写上述信息");
        this.$store.dispatch("closeTitle");
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/base.less";
.phone-container {
  align-content: space-between;
  height: 315px;
  padding-top: 10px;
}
.phone-container-main {
  width: 100%;
  height: 200px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 50px;
  form {
    display: inline-block;
    text-align: left;
    padding: 30px 0;
    input {
      height: 26px;
      outline: none;
      border: 1px solid #cdcdcd;
      border-radius: 3px;
      font-size: 12px;
      text-indent: 0.5em;
    }
    .phone-ipt {
      width: 200px;
      margin-bottom: 23px;
    }
    .short-msg {
      width: 100px;
    }
    .getMsg-btn {
      border: 1px solid #ccc;
      height: 29px;
      float: right;
      border-radius: 3px;
      font-size: 12px;
      cursor: pointer;
      width: 94px;
    }
    .phone-config {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #666666;
      margin-top: 7px;
      justify-content: space-between;
      .zidong-login {
        display: flex;
        align-items: center;
      }
    }
    .login-btn {
      width: 100%;
      height: 30px;
      background-color: #3b8ad4;
      border: 1px solid #3984ce;
      border-radius: 5px;
      margin-top: 15px;
      color: #fff;
      cursor: pointer;
    }
  }
}
.phone-login-bottom {
  font-size: 12px;
  padding: 0 20px;
  a {
    line-height: 50px;
    text-decoration: none;
  }
  .go-other-login {
    color: #0c72c3;
  }
  .txt-r {
    float: right;
    color: #9d9d9d;
  }
}
</style>